Jump to content
  • 0

Верстка на дивах

Walk

Asked by Walk,

 Share

Question

12 answers to this question

Recommended Posts

  • 0
hmelii Explorer

hmelii

Posted
Posted
Необходимо сделать следующую вещь:

verrrr.gif

С дивной версткой мало знаком, прошу помочь кто знает.

По идее, человек который хоть раз такое делал слету скажет что и как надо сделать.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<title>Untitled Document</title>
<style>
html, body { margin:0; padding:0; color:#fff; }
</style>
</head>
<body>
<div style="float:left; width:50%; margin-right:-100px; background:green; height:200px;">
	<div style="padding-right:100px;">Левая тянущаяся колонка</div>
</div>
<div style="float:right; width:50%; margin-left:-100px; background:blue; height:200px;">
	<div style="padding-left:100px;">Правая тянущаяся колонка </div>
</div>
<div style="background:red; z-index:1;  position:relative; overflow:hidden; display:block!important; /*ie6*/display:inline-block;">
	<div style="float:left; width:50px; height:200px; background:#600;">width: 50px</div>
	<div style="float:right; width:50px; height:200px;  background:#600;">width:
		50px</div>
	<div style=" overflow:hidden; height:200px;  background:red;">width: 100px</div>
</div>
</body>
</html>

Link to comment
Share on other sites
  • 0
Yahoo! Explorer

Yahoo!

Posted
Posted (edited)

А как сверстать это:

http://s44.radikal.ru/i105/0811/d9/50f70d8650fe.jpg

Надо чтобы весь контент ездил, внутри него только зелёный блок ездил, а остальные по бокам были фиксированы и не наезжали на него и не разваливались.

Вот ещё некоторые параметры, весь контент имеет ширину к примеру 85%; левая синия 30px; левая красная 40px; и зеркально 40px; 30px

Пробовал позитион абсолите - наезжают;

Пробовал поситион релатив - разваливаются;

--

Вычитал в инете имитацию абсолютного позиционирования - не понял :P , ссылка:

http://www.getincss.ru/2008/06/25/novaya-t...aniya/#more-175

Объсните!!

Edited by Yahoo!
Link to comment
Share on other sites
  • 0
homm Explorer

homm

Posted
Posted
Вот ещё некоторые параметры, весь контент имеет ширину к примеру 85%; левая синия 30px; левая красная 40px; и зеркально 40px; 30px

Это невозможно. А вот то, что вы нарисовали вполне возможно.

Link to comment
Share on other sites
  • 0
homm Explorer

homm

Posted
Posted
Как так?? А тот метод, что по ссылке, может им можно??

А вот так. Если контент — 85%, то значит все остальное — 15%. А это и есть фиксированая часть 170px. Значит твое условие будет выполняться только при ширине строго 1133,(3)px.

А вот если ты имел ввиду то, что нарисовал (средняя колонка = ширина -140px), то так можно, мать всех наук разрешает.

Математику нужно было в школе учить :P

Link to comment
Share on other sites
  • 0
Yahoo! Explorer

Yahoo!

Posted
Posted (edited)

Нереально?

Всё же

HTML

<div id="page">
   <div id="left"></div>
   <div id="left_all"></div>
				<div id="center">Тянущийся контент</div>
   <div id="right_all"></div>
   <div id="right"></div>
</div>

CSS

#page {
  width: 85%;
  position: relative;
  background: red;
  margin: 0 auto;
}

#left {
  position: absolute;
  background: green;
  width: 30px;
  top: 0;
  left: 0;
  height: 100%;
}

#left_all {
  position: absolute;
  background: blue;
  width: 20px;
  top: 0;
  left: 30px;
  height: 100%;
}

#center {
  margin: 0 50px;
  background: pink
}

#right_all {
  position: absolute;
  background: blue;
  width: 20px;
  top: 0;
  right: 30px;
  height: 100%;
}

#right {
  position: absolute;
  background: green;
  width: 30px;
  height: 100%;
  top: 0;
  right: 0;
}

Edited by Yahoo!
Link to comment
Share on other sites
  • 0
SelenIT Explorer

SelenIT

Posted
Posted (edited)

Yahoo!, это табличный ужас по сути. Особенно пустые дивки по бокам. Они только в Quirks mode (который получился из-за непонятно чего перед доктайпом) работать и могут, и то никто этого не гарантирует. Делать такое таблицей и надежнее, и честнее.

Для сравнения - визуально то же самое в крайнем минимализме. Это, конечно, утрированный пример, в реальных условиях так не получится и придется идти на какие-то компромиссы. Но не ценой Quirks mode для нормальных браузеров и такого псевдотабличного издевательства над семантикой, как эти пустые квадраты по бокам!

Edited by SelenIT
Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
 Share
Go to question listing
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy

  I accept